
import { graphic } from 'echarts';
import { random } from 'lodash';

const animationDuration = 1000 * 1;

/**
 * 柱状图【一条数据】
 * @param param0 数据
 * @param legendName 图例组件name
 * @param title 标题
 * @returns
 */
export const onceBarChart = ({ xdata, ydata }: any, legendName = '', title = '') => {
  return {
    animationDuration,
    title: {
      text: title, // 标题文本
      left: 'center', // 标题居中
      bottom: 'bottom', // 底部对齐
      textStyle: {
        fontWeight: 400,
        fontSize: 12,
        color: '#fff',
        fontFamily: 'PingFangSC-Regular',
      },
    },
    legend: {
      textStyle: {
        fontWeight: 400,
        fontSize: 12,
        color: '#fff',
        fontFamily: 'PingFangSC-Regular',
      },
    },
    grid: {
      left: '20px',
      right: '20px',
      bottom: title ? '24px' : '16px',
      top: '40px',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        boundaryGap: true,
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: '#eee',
          interval: 0, // 显示所有标签
        },
        data: xdata,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位：单',
        smooth: true,
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        axisLabel: {
          // formatter: "{value} %",
          color: '#eee',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: legendName,
        type: 'bar',
        data: ydata.map((item: any) => {
          return parseInt(item);
        }),
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#0cdde4', // 起始颜色
              },
              {
                offset: 1,
                color: '#0793e7', // 结束颜色
              },
            ],
          },
        },
        barWidth: 15,
      },
    ],
  };
};
// 柱状 折线 图【多条数据】
export const moreBarLineChart = (_data = []) => {
  return {
    animationDuration,
    legend: {
      textStyle: {
        fontWeight: 400,
        fontSize: 12,
        color: '#fff',
        fontFamily: 'PingFangSC-Regular',
      },
    },
    grid: {
      left: '20px',
      right: '20px',
      bottom: '16px',
      top: '40px',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        boundaryGap: true,
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: '#eee',
        },
        data: ['一月', '二月', '三月', '四月', '五月', '六月'],
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位：单',
        smooth: true,
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        axisLabel: {
          // formatter: "{value} %",
          color: '#eee',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: '销售额',
        type: 'bar',
        data: [random(20, 50), random(20, 50), random(20, 50), random(20, 50), random(20, 50), random(20, 50)],
        // itemStyle: {
        //   // borderRadius: [10, 10, 0, 0],
        //   color: new graphic.LinearGradient(0, 0, 1, 0, [
        //     {
        //       offset: 0,
        //       color: "rgb(13, 228, 228,1)",
        //     },
        //     {
        //       offset: 1,
        //       color: "rgb(7, 152, 231,1)",
        //     },
        //   ]),
        // },
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#0cdde4', // 起始颜色
              },
              {
                offset: 1,
                color: '#0793e7', // 结束颜色
              },
            ],
          },
        },
        barWidth: 15,
      },
    ],
  };
};
// 折线图
export const lineChart = ({ xdata, ydata }: any, legendName = '', title = '') => {
  return {
    animationDuration,
    title: {
      text: title, // 标题文本
      left: 'center', // 标题居中
      bottom: 'bottom', // 底部对齐
      textStyle: {
        fontWeight: 400,
        fontSize: 12,
        color: '#fff',
        fontFamily: 'PingFangSC-Regular',
      },
    },
    legend: {
      textStyle: {
        fontWeight: 400,
        fontSize: 12,
        color: '#fff',
        fontFamily: 'PingFangSC-Regular',
      },
    },
    grid: {
      left: '20px',
      right: '20px',
      bottom: title ? '24px' : '16px',
      top: '40px',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        boundaryGap: true,
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: '#eee',
        },
        data: xdata,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位：单',
        smooth: true,
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        axisLabel: {
          color: '#eee',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: legendName,
        type: 'line',
        data: ydata,
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#0cdde4', // 起始颜色
              },
              {
                offset: 1,
                color: '#0793e7', // 结束颜色
              },
            ],
          },
        },
      },
    ],
  };
};
// 柱状图【横向排列】
export const barLineChart = (data = [], title = '') => {

  return {
    title: {
      text: title, // 标题文本
      left: 'center', // 标题居中
      bottom: 'bottom', // 底部对齐
      textStyle: {
        fontWeight: 400,
        fontSize: 12,
        color: '#fff',
        fontFamily: 'PingFangSC-Regular',
      },
    },
    grid: {
      left: '20px',
      right: '20px',
      bottom: title ? '16px' : '0px',
      top: '10px',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      show: false,
      type: 'value',
      axisLabel: {
        color: '#eee',
      },
      boundaryGap: false,
      splitLine: {
        show: false,
      },
    },
    yAxis: [
      {
        type: 'category',
        inverse: true,
        data: data ? data.map((item:any)=> item.label) : [],
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: '#eee',
        },
      },
    ],
    series: {
      name: '',
      type: 'bar',
      zlevel: 1,
      itemStyle: {
        borderRadius: 10,
        color: new graphic.LinearGradient(0, 0, 1, 0, [
          {
            offset: 0,
            color: 'rgb(57,89,255,1)',
          },
          {
            offset: 1,
            color: 'rgb(46,200,207,1)',
          },
        ]),
      },
      barWidth: 15,
      data: data ? data.map((item:any)=> item.value) : [],
      label: {
        show: true,
        position: 'inside',
        color: '#fff',
      },
    },
  };
};
// 水球
export const liquidFillChart = (_data = []) => {
  var value = 0.45;
  // var value1 = 0.76;
  // var data = [value];
  return {
    title: [
      {
        text: '本年收缴率',
        x: '50%',
        y: '70%',
        textStyle: {
          fontSize: 14,
          fontWeight: '100',
          color: '#5dc3ea',
          lineHeight: 16,
          textAlign: 'center',
        },
      },
    ],
    graphic: [
      {
        type: 'group',
        left: 'center',
        top: '35%',
        children: [
          {
            type: 'text',
            z: 100,
            left: '40',
            top: 'middle',
            style: {
              fill: '#aab2fa',
              text: '流量统计',
              font: '20px Microsoft YaHei',
            },
          },
        ],
      },
    ],
    series: [
      {
        type: 'liquidFill',
        radius: '47%',
        center: ['50%', '45%'],
        color: [
          {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#446bf5',
              },
              {
                offset: 1,
                color: '#2ca3e2',
              },
            ],
            globalCoord: false,
          },
        ],
        data: [value], // data个数代表波浪数
        backgroundStyle: {
          borderWidth: 1,
          color: 'RGBA(51, 66, 127, 0.7)',
        },
        label: {
          normal: {
            textStyle: {
              fontSize: 50,
              color: '#fff',
            },
          },
        },
        outline: {
          show: false,
          borderDistance: 10,
          itemStyle: {
            borderWidth: 2,
            borderColor: '#112165',
          },
        },
      },
    ],
  };
};
// 饼图
export const pieChart = ({ xdata, ydata }: any) => {
  // console.log(xdata, ydata);
  return {
    // backgroundColor: 'tr',
    legend: {
      orient: 'vertical',
      left: '70%',
      top: 'center',
      icon: 'rect',
      itemWidth: 10,
      itemHeight: 10,
      itemGap: 15,
    },
    color: ['#00b0f0', '#0070c0', '#00b050', '#ffff00', '#70ad47', '#ff0000'],
    series: [
      {
        type: 'pie',
        center: ['40%', '50%'],
        radius: '50%',
        label: {
          show: false,
        },
        data: ydata.map((item: any, index: number) => {
          return {
            name: xdata[index],
            value: item,
          };
        }),
        // data: [
        //   {
        //     name: 'Ⅰ类',
        //     value: '20',
        //   },
        //   {
        //     name: 'Ⅱ类',
        //     value: '10',
        //   },
        //   {
        //     name: 'Ⅲ类',
        //     value: '10',
        //   },
        //   {
        //     name: 'Ⅳ类',
        //     value: '20',
        //   },
        //   {
        //     name: 'Ⅴ类',
        //     value: '10',
        //   },
        //   {
        //     name: '劣Ⅴ类',
        //     value: '30',
        //   },
        // ],
      },
      {
        type: 'pie',
        center: ['40%', '50%'],
        radius: '70%',
        label: {
          position: 'inside',
          // formatter: '{b}{c}%',
          formatter: '{c}%',
          color: '#000',
          fontSize: 14,
        },
        data: ydata.map((item: any, index: number) => {
          return {
            name: xdata[index],
            value: item,
          };
        }),
        // data: [
        //   {
        //     name: 'Ⅰ类',
        //     value: '20',
        //     itemStyle: {
        //       color: 'rgba(0,0,0,0)',
        //     },
        //   },
        //   {
        //     name: 'Ⅱ类',
        //     value: '10',
        //     itemStyle: {
        //       color: 'rgba(0,0,0,0)',
        //     },
        //   },
        //   {
        //     name: 'Ⅲ类',
        //     value: '10',
        //     itemStyle: {
        //       color: 'rgba(0,0,0,0)',
        //     },
        //   },
        //   {
        //     name: 'Ⅳ类',
        //     value: '20',
        //     itemStyle: {
        //       color: 'rgba(0,0,0,0)',
        //     },
        //   },
        //   {
        //     name: 'Ⅴ类',
        //     value: '10',
        //     itemStyle: {
        //       color: 'rgba(0,0,0,0)',
        //     },
        //   },
        //   {
        //     name: '劣Ⅴ类',
        //     value: '30',
        //     itemStyle: {
        //       color: 'rgba(0,0,0,0)',
        //     },
        //   },
        // ],
      },
    ],
  };
};
// 饼图【扇形】
export const fanPieChart = ({ }: any) => {
  return {
    tooltip: {
      trigger: 'item'
    },
    grid: {
      left: '20px',
      right: '20px',
      bottom: '0px',
      top: '-60px',
      containLabel: true,
    },
    legend: {
      bottom: 0, // 将图例放置在底部，0表示紧贴底部边缘
    },
    // title: {
    //   text: '设备总数',
    //   left: '45%',
    //   top: 'center',
    //   textStyle: {
    //     fontSize: 12,
    //     color: '#ffffff',
    //     fontWeight: 'bold',
    //   }
    // },
    title: [{
      text: '52',
      x: '50%',
      y: '40%',
      textAlign: 'center',
      textStyle: {
        fontSize: '36',
        fontWeight: '500',
        color: '#98b5d2',
        textAlign: 'center',
        textShadowColor: '#000',
        textShadowBlur: '1',
        textShadowOffsetX: 2,
        textShadowOffsetY: 2,
      },
    }, {
      text: '设备总数',
      left: '50%',
      top: '54%',
      textAlign: 'center',
      textStyle: {
        fontSize: '18',
        fontWeight: '400',
        color: '#DCDCDC',
        textAlign: 'center',
        textShadowColor: '#000',
        textShadowBlur: '1',
        textShadowOffsetX: 1,
        textShadowOffsetY: 1,
      },
    },],
    series: [
      {
        name: '设备',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 2,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        label: {
          color: '#fff',
          fontSize: 16,
        },
        data: [
          { value: 1048, name: '完成' },
          { value: 735, name: '未完成' },
        ]
      }
    ]
  };
};
// 饼图【基础】
export const basePieChart = (data: any = [
  { value: 1048, name: '完成' },
  { value: 735, name: '未完成' },
], otherPorps: any = {}) => {

  // 其他值
  const { oneText = '', twoText = '', name = '', color = ['#9fe080', '#5c7bd9'], radius = ['40%', '70%'] } = otherPorps

  return {
    color,
    tooltip: {
      trigger: 'item'
    },
    grid: {
      top: -10,  // 将图表整体向上偏移10px
      bottom: 20,
      containLabel: true
    },
    legend: {
      bottom: '0px', // 将图例放置在底部，0表示紧贴底部边缘
      textStyle: {
        color: '#fff'
      },
    },
    title: [{
      text: oneText,
      x: '50%',
      y: '40%',
      textAlign: 'center',
      textStyle: {
        fontSize: '36',
        fontWeight: '500',
        color: '#98b5d2',
        textAlign: 'center',
        textShadowColor: '#000',
        textShadowBlur: '1',
        textShadowOffsetX: 2,
        textShadowOffsetY: 2,
      },
    }, {
      text: twoText,
      left: '50%',
      top: '54%',
      textAlign: 'center',
      textStyle: {
        fontSize: '18',
        fontWeight: '400',
        color: '#DCDCDC',
        textAlign: 'center',
        textShadowColor: '#000',
        textShadowBlur: '1',
        textShadowOffsetX: 1,
        textShadowOffsetY: 1,
      },
    },],
    series: [
      {
        name,
        type: 'pie',
        radius,
        avoidLabelOverlap: false,
        padAngle: 5,
        itemStyle: {
          borderRadius: 2,
        },
        emphasis: {
          itemStyle: {
            shadowBlur: 10,
            shadowOffsetX: 0,
            shadowColor: 'rgba(0, 0, 0, 0.5)'
          }
        },
        labelLine: {
          length: 4,  // 控制引导线的长度，可根据需求调整这个值让其变短
          length2: 4,
          lineStyle: {
            width: 1  // 线的宽度，可以适当调整
          }
        },
        label: {
          color: '#fff',
          fontSize: 12,
        },
        data
      }
    ]
  };
};

//折柱混合
export const foldingColumnMixing = ({ xdata, ydata }: any) => {
  return {
    animationDuration,
    legend: [
      {
        itemWidth: 7,
        itemHeight: 6,
        data: [
          {
            name: ydata.length ? ydata[0].name : '',
            icon: 'rect',
          },
        ],
        textStyle: {
          fontWeight: 400,
          fontSize: 12,
          color: '#595959',
          fontFamily: 'PingFangSC-Regular',
        },
        // top:5, //调整位置
        left: '40%', //调整位置
      },
      {
        itemWidth: 13,
        itemHeight: 2,
        data: [
          {
            name: ydata.length ? ydata[1].name : '',
            icon: 'rect',
          },
        ],
        textStyle: {
          fontWeight: 400,
          fontSize: 12,
          color: '#595959',
          fontFamily: 'PingFangSC-Regular',
        },
        left: '60%', //调整位置
      },
    ],
    grid: {
      left: '20px',
      right: '20px',
      bottom: '16px',
      top: '40px',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        boundaryGap: true,
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: '#eee',
          interval: 0, // 显示所有标签
        },
        data: xdata,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '单位：单',
        smooth: true,
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        axisLabel: {
          // formatter: "{value} %",
          color: '#eee',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: 'value',
        name: '',
        smooth: true,
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        axisLabel: {
          formatter: '',
          color: '#eee',
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: ydata.length ? ydata[0].name : '',
        type: ydata.length ? ydata[0].type : '',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#0cdde4', // 起始颜色
              },
              {
                offset: 1,
                color: '#0793e7', // 结束颜色
              },
            ],
          },
        },
        barWidth: 15,
        tooltip: {
          valueFormatter: function (value: string) {
            // return value + ' ml';
            return value;
          },
        },
        data: ydata.length ? ydata[0].data.map((item: any) => {
          return parseInt(item);
        }) : [],
      },
      {
        name: ydata.length ? ydata[1].name : '',
        type: ydata.length ? ydata[1].type : '',
        yAxisIndex: 1,
        itemStyle: {
          color: '#2fcccc', //绿色
        },
        showSymbol: false,
        tooltip: {
          valueFormatter: function (value: string) {
            // return value + ' °C';
            return value;
          },
        },
        data: ydata.length ? ydata[1].data.map((item: any) => {
          return parseInt(item);
        }) : [],
      },
    ],
  };
};
//折柱混合【仓库看板-2条】
export const mixingWarehouseBi = (data: any, title = '', legend: any = ['金额', '数量']) => {

  const { xdata, yamountData, ynumData } = data

  return {
    animationDuration,
    title: {
      text: title, // 标题文本
      left: 'center', // 标题居中
      bottom: 'bottom', // 底部对齐
      textStyle: {
        fontWeight: 400,
        fontSize: 12,
        color: '#fff',
        fontFamily: 'PingFangSC-Regular',
      },
    },
    legend: [
      {
        itemWidth: 7,
        itemHeight: 6,
        data: [
          {
            name: legend[0],
            icon: 'rect',
          },
        ],
        textStyle: {
          fontWeight: 400,
          fontSize: 12,
          color: '#595959',
          fontFamily: 'PingFangSC-Regular',
        },
        // top:5, //调整位置
        left: '40%', //调整位置
      },
      {
        itemWidth: 13,
        itemHeight: 2,
        data: [
          {
            name: legend[1],
            icon: 'rect',
          },
        ],
        textStyle: {
          fontWeight: 400,
          fontSize: 12,
          color: '#595959',
          fontFamily: 'PingFangSC-Regular',
        },
        left: '60%', //调整位置
      },
    ],
    grid: {
      left: '20px',
      right: '20px',
      bottom: title ? '24px' : '16px',
      top: '40px',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        boundaryGap: true,
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: '#eee',
          interval: function (index: number) {
            // 根据索引和值来决定是否显示标签，可以根据图表宽度自己计算规则
            // 例如，每隔n个标签显示一次
            let interval: any = 0;
            if (index % (2 + 1) === 0) {
              interval = 'auto'; // 显示标签
            } else {
              interval = 0; // 不显示标签
            }
            return interval;
          }
        },
        data: xdata,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '¥',
        smooth: true,
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        axisLabel: {
          // formatter: "{value} %",
          color: '#eee',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: 'value',
        name: '个',
        smooth: true,
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        axisLabel: {
          // formatter: '',
          color: '#eee',
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: legend[0],
        type: 'bar',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#0cdde4', // 起始颜色
              },
              {
                offset: 1,
                color: '#0793e7', // 结束颜色
              },
            ],
          },
        },
        barWidth: 15,
        tooltip: {
          valueFormatter: function (value: string) {
            // return value + ' ml';
            return value;
          },
        },
        data: [...yamountData],
      },
      {
        name: legend[1],
        type: 'line',
        yAxisIndex: 1,
        itemStyle: {
          color: '#2fcccc', //绿色
        },
        showSymbol: false,
        tooltip: {
          valueFormatter: function (value: string) {
            // return value + ' °C';
            return value;
          },
        },
        data: [...ynumData],
      },
    ],
  };
};
//折柱混合【仓库看板-3条】
export const mixingWarehouseBi3 = (data: any, title = '', legend: any = ['暂存数量', '转入数量', '转出数量']) => {

  const { xdata, yintoData, youtData, yholdData } = data
  
  return {
    animationDuration,
    title: {
      text: title, // 标题文本
      left: 'center', // 标题居中
      bottom: 'bottom', // 底部对齐
      textStyle: {
        fontWeight: 400,
        fontSize: 12,
        color: '#fff',
        fontFamily: 'PingFangSC-Regular',
      },
    },
    legend: [
      {
        itemWidth: 7,
        itemHeight: 6,
        data: [
          {
            name: legend[0],
            icon: 'rect',
          },
        ],
        textStyle: {
          fontWeight: 400,
          fontSize: 12,
          color: '#595959',
          fontFamily: 'PingFangSC-Regular',
        },
        // top:5, //调整位置
        left: '20%', //调整位置
      },
      {
        itemWidth: 13,
        itemHeight: 2,
        data: [
          {
            name: legend[1],
            icon: 'rect',
          },
        ],
        textStyle: {
          fontWeight: 400,
          fontSize: 12,
          color: '#595959',
          fontFamily: 'PingFangSC-Regular',
        },
        left: '40%', //调整位置
      },
      {
        itemWidth: 13,
        itemHeight: 2,
        data: [
          {
            name: legend[2],
            icon: 'rect',
          },
        ],
        textStyle: {
          fontWeight: 400,
          fontSize: 12,
          color: '#595959',
          fontFamily: 'PingFangSC-Regular',
        },
        left: '60%', //调整位置
      },
    ],
    grid: {
      left: '20px',
      right: '20px',
      bottom: title ? '24px' : '16px',
      top: '40px',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: [
      {
        type: 'category',
        axisLine: {
          show: true,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        boundaryGap: true,
        splitLine: {
          show: false,
        },
        axisLabel: {
          color: '#eee',
          interval: function (index: number) {
            // 根据索引和值来决定是否显示标签，可以根据图表宽度自己计算规则
            // 例如，每隔n个标签显示一次
            let interval: any = 0;
            if (index % (2 + 1) === 0) {
              interval = 'auto'; // 显示标签
            } else {
              interval = 0; // 不显示标签
            }
            return interval;
          }
        },
        data: xdata,
      },
    ],
    yAxis: [
      {
        type: 'value',
        name: '个',
        smooth: true,
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        axisLabel: {
          // formatter: "{value} %",
          color: '#eee',
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        splitLine: {
          show: false,
        },
      },
      {
        type: 'value',
        name: '',
        smooth: true,
        showAllSymbol: false,
        symbol: 'circle',
        symbolSize: 2,
        axisLabel: {
          formatter: '',
          color: '#eee',
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: '#0cd7e4',
          },
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: legend[0],
        type: 'bar',
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: '#0cdde4', // 起始颜色
              },
              {
                offset: 1,
                color: '#0793e7', // 结束颜色
              },
            ],
          },
        },
        barWidth: 15,
        tooltip: {
          valueFormatter: function (value: string) {
            // return value + ' ml';
            return value;
          },
        },
        data: yintoData || [],
      },
      {
        name: legend[1],
        type: 'line',
        yAxisIndex: 1,
        itemStyle: {
          color: '#2fcccc', //绿色
        },
        showSymbol: false,
        tooltip: {
          valueFormatter: function (value: string) {
            // return value + ' °C';
            return value;
          },
        },
        data: youtData || [],
      },
      {
        name: legend[2],
        type: 'line',
        yAxisIndex: 1,
        itemStyle: {
          color: '#0793e7', //绿色
        },
        showSymbol: false,
        tooltip: {
          valueFormatter: function (value: string) {
            // return value + ' °C';
            return value;
          },
        },
        data: yholdData || [],
      },
    ],
  };
};
//雷达图
export const radar = ({ xdata, ydata }: any) => {
  console.log(xdata, ydata);
  return {
    animationDuration,
    // title: {
    //   text: 'Basic Radar Chart',
    // }
    radar: {
      // shape: 'circle',
      indicator: [
        { name: '到货及时率', max: 6500 },
        { name: '退货率', max: 16000 },
        { name: '躲闪', max: 30000 },
        { name: '攻击', max: 38000 },
        { name: '检验合格', max: 52000 },
      ],
    },
    series: [
      {
        name: 'B',
        type: 'radar',
        data: [
          {
            value: [4200, 3000, 20000, 35000, 50000],
            name: 'a',
          },
        ],
      },
    ],
  };
};
//多数据横向柱状图
export const multipleHorizontalBar = ({ xdata, ydata }: any) => {
  // console.log(xdata, ydata);
  return {
    animationDuration,
    legend: {
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontWeight: 400,
        fontSize: 12,
        color: '#C0CCD2',
        fontFamily: 'PingFangSC-Regular',
      },
    },
    grid: {
      left: '20px',
      right: '20px',
      bottom: '16px',
      top: '40px',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: [
      {
        type: 'value',
        boundaryGap: [0, 0.01],
        show: true,
        axisLabel: {
          color: '#DFEFF6',
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#212121'],
            width: 2,
          },
        },
      },
    ],

    yAxis: [
      {
        type: 'category',
        axisLabel: {
          // formatter: "{value} %",
          color: '#eee',
          fontSize: 12,
          fontFamily: 'PingFangSC-Regular',
          fontWeight: 400,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#0cd7e4',
            z: 10,
          },
        },
        axisTick: {
          show: false, // 添加这一行
        },
        splitLine: {
          show: false,
        },
        //截取ydata中的前6个
        // data: ydata.slice(0, 6),
        data: ydata,
      },
    ],
    // series: xdata,
    series: [
      {
        ...xdata[0],
        // name: '数量',
        // type: 'bar',
        // data: [18203, 23489, 29034, 104970, 131744, 630230],
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(7, 146, 231, 1)', // 起始颜色
              },
              {
                offset: 1,
                color: 'rgba(13, 233, 228, 1)', // 结束颜色
              },
            ],
          },
        },
      },
      {
        ...xdata[1],
        // name: '类型',
        // type: 'bar',
        // data: [19325, 23438, 31000, 121594, 134141, 681807],
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(41, 79, 120, 1)', // 结束颜色
              },
              {
                offset: 1,
                color: 'rgba(24, 143, 252, 1)', // 起始颜色
              },
            ],
          },
        },
      },
    ],
  };
};
//单数据横向柱状图
export const singleHorizontalBar = ({ xdata, ydata }: any) => {
  // console.log(xdata, ydata);
  return {
    animationDuration,
    legend: {
      itemWidth: 10,
      itemHeight: 10,
      textStyle: {
        fontWeight: 400,
        fontSize: 12,
        color: '#C0CCD2',
        fontFamily: 'PingFangSC-Regular',
      },
    },
    grid: {
      left: '20px',
      right: '20px',
      bottom: '16px',
      top: '40px',
      containLabel: true,
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: [
      {
        type: 'value',
        boundaryGap: [0, 0.01],
        show: true,
        axisLabel: {
          color: '#DFEFF6',
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: ['#212121'],
            width: 2,
          },
        },
      },
    ],

    yAxis: [
      {
        type: 'category',
        axisLabel: {
          // formatter: "{value} %",
          color: '#eee',
          fontSize: 12,
          fontFamily: 'PingFangSC-Regular',
          fontWeight: 400,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: '#0cd7e4',
            z: 10,
          },
        },
        axisTick: {
          show: false, // 添加这一行
        },
        splitLine: {
          show: false,
        },
        //截取ydata中的前6个
        // data: ydata.slice(0, 6),
        data: ydata,
      },
    ],
    // series: xdata,
    series: [
      {
        ...xdata[0],
        // name: '数量',
        // type: 'bar',
        // data: [18203, 23489, 29034, 104970, 131744, 630230],
        itemStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 1,
            y2: 0,
            colorStops: [
              {
                offset: 0,
                color: 'rgba(7, 146, 231, 1)', // 起始颜色
              },
              {
                offset: 1,
                color: 'rgba(13, 233, 228, 1)', // 结束颜色
              },
            ],
          },
        },
      },
      {
        //最右竖线
        name: '',
        type: 'pictorialBar',
        symbol: 'rect',
        // symbolSize: [3, 16],
        symbolSize: (value: any, params: any) => {
          const dataLength = xdata[0].data.length;
          const baseHeight = 5; // 基础高度
          const maxHeight = 16; // 最大高度
          const minHeight = 5; // 最小高度
          const dynamicHeight = Math.max(minHeight, Math.min(maxHeight, baseHeight * (1 / Math.sqrt(dataLength))));
          return [3, dynamicHeight]; // 返回 [宽度, 高度]
        },
        symbolOffset: [0, 0],
        z: 3,
        symbolPosition: 'end',
        itemStyle: {
          color: 'rgba(255, 255, 255, 1)',
          opacity: 1,
        },
        tooltip: {
          show: false, // 禁用提示信息
        },
        emphasis: {
          focus: 'none', // 禁用鼠标悬停效果
        },
        data: xdata[0].data,
      },
    ],
  };
};
// 仪表盘
export const instrumentPanel = (value: any) => {
  // console.log(xdata, ydata);
  return {
    animationDuration,
    series: [
      {
        type: 'gauge',
        progress: {
          show: true,
          roundCap: true,
          width: 9,
          itemStyle: {
            color: {
              type: 'linear',
              x: 1,
              y: 0,
              x2: 0,
              y2: 0,
              colorStops: [
                {
                  offset: 1,
                  color: '#00acfc', // 0% 处的颜色
                },
                {
                  offset: 0,
                  color: '#00f8d9', // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
        axisLine: {
          roundCap: true,
          lineStyle: {
            width: 9,
            color: [
              [
                5,
                {
                  type: 'radial',
                  x: 0.5,
                  y: 0.6,
                  r: 0.6,
                  colorStops: [
                    {
                      offset: 0.85,
                      color: 'rgba(50, 226, 247, 0)', // 0% 处的颜色
                    },
                    {
                      offset: 0.9,
                      color: 'rgba(24, 124, 165, 0.1)', // 100% 处的颜色
                    },
                    {
                      offset: 1,
                      color: 'rgba(24, 124, 165, 1.00)', // 100% 处的颜色
                    },
                  ],
                },
              ],
            ],
          },
        },
        axisTick: {
          show: false,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.3)', // 用颜色渐变函数不起作用
            width: 1,
          },
        },
        pointer: {
          show: true,
          length: '70%',
          width: 4,
          itemStyle: {
            color: '#01ffff',
          },
        },
        splitLine: {
          length: 5,
          distance: 1,
          lineStyle: {
            width: 2,
            color: '#00f8d9',
          },
        },
        axisLabel: {
          distance: 16,
          color: '#fff',
          fontSize: 10,
        },
        anchor: {
          show: true,
          showAbove: true,
          size: 3,
          itemStyle: {
            borderWidth: 1,
            color: '#01ffff',
            borderColor: '#063059',
          },
        },
        title: {
          show: false,
        },
        detail: {
          valueAnimation: true,
          fontSize: 24,
          color: '#01ffff',
          offsetCenter: [0, '70%'],
        },
        data: [
          {
            value: value,
          },
        ],
      },
    ],
  };
};
